<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{ title }}</h2>
    <p>m: {{ m }}</p>
    <hr>
    <p>我们在页面实例化的 vm 一般我们称之为根组件，其他的组件
        都是作为 root 组件的子组件存在的。</p>
    <p>父组件是否可以直接显示子组件的数据呢？ {{ n }}</p>
    <!--
    子父通信的第一步：在子组件上面绑定一个用户自定义事件
    @自定义事件的名称用户自己定义即可
    -->
    <!--
    子父通信的第二步：在父组件的 methods 里面为自定义事件定义
    回调函数
    -->
    <i-son @myevent="eventHandler"></i-son>
</div>
</body>
<template id="sonTmp">
    <div>
        <h3>我是 son 组件</h3>
        <p>子组件显示自己的 money 数据： {{ money }}</p>
        <!--
            子父通信的第三步： 需要在子组件触发父组件绑定的自定义事件
        -->
        <button @click="emitEventHandler">触发父组件绑定的事件，传递数据给父组件</button>
    </div>
</template>
<script src="lib/vue/vue.js"></script>

<script type="text/javascript">
    /*
    * 定义一个组件
    * */
    Vue.component('i-son', {
        data() {
            return {
                money: 1000,
            }
        },
        template: '#sonTmp',
        methods: {
            emitEventHandler() {
                // 触发父组件绑定的自定义事件
                /*
                * 参数1：父组件绑定的自定义事件
                * 参数2：待传递的数据（子组件给父组件的数据）
                * */
                this.$emit('myevent', {money: this.money});
            }
        }
    })

    // 根组件 root
    const vm = new Vue({
        el: '#app',
        data: {
            title: 'vuejs 子父通信的问题',
            m: 100,
            n: 0,
        },
        methods: {

            eventHandler(data) {
                console.log(data);
                /*
                * n 用于接收子组件传递给父组件的数据
                * */
                this.n = data.money;
            }
        }
    })
</script>

</html>
